"use client"
import { Tabs, Mask } from 'antd-mobile'
import useRequireAuth from '@/hooks/useRequireAuth'
import { useState } from 'react'
import ChartGroup from '@/components/pageComponents/home/chartPage/ChartGroup'
import dayjs from 'dayjs'
import CustomTimeCard from '@/components/pageComponents/home/common/CustomTimeCard'
export default function(){
  useRequireAuth()

  const [activeKey, setActiveKey] = useState('curMonth')
  const [balance, setBalance] = useState({
    income: 0,
    expenses: 0,
    balance: 0
  })
  const [curMonthDate, setCurMonthDate] = useState({
    happened_after: dayjs().startOf('month').format('YYYY-MM-DD'),
    happened_before: dayjs().endOf('month').format('YYYY-MM-DD')
  })
  const [lastMonthDate, setLastMonthDate] = useState({
    happened_after: dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
    happened_before: dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD')
  })
  const [customDate, setCustomDate] = useState({
    happened_after: '',
    happened_before: ''
  })
  const beforeTabChange = (key: string) => {
    setActiveKey(key)
  }
  const [visible, setVisible] = useState(false)
  const getCustomDate = (obj: ItemListDateParam) => {
    setCustomDate(obj)
    setVisible(false)
  }
  return <div className='h-full'>
    <Tabs activeKey={activeKey} onChange={beforeTabChange} className="fullHeight">
      <Tabs.Tab title='本月' key='curMonth'>
        <ChartGroup timePeriod={curMonthDate}/>
      </Tabs.Tab>
      <Tabs.Tab title='上月' key='lastMonth'>
        <ChartGroup timePeriod={lastMonthDate}/>
      </Tabs.Tab>
      <Tabs.Tab title={ <span onClick={()=>setVisible(true)}>自定义时间</span> }  key='custom'>
        <ChartGroup timePeriod={customDate}/>
      </Tabs.Tab>
    </Tabs>
    <Mask visible={visible} onMaskClick={() => setVisible(false)}>
      <CustomTimeCard cancel={()=>setVisible(false)} sendDateForm={getCustomDate}/>
    </Mask>
  </div>
}